<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!doctype html>

<!--告诉浏览器当前网页使用的是中文，声明后将有便于外部程序对网页进行翻译，例如有道翻译等等-->
<html lang="zh-CN">

<head>

<!--编码格式为 utf-8(国际编码)-->
<meta charset="utf-8">

<!--设置页面关键字-->
<meta name="keywords" content="设置网站关键字">

<!--设置页面的描述-->
<meta name="description" content="设置页面的描述,建议在200字以内">

<!--设置浏览器优先使用急速模式-->
<meta name="renderer" content="webkit">

<!--禁止移动设备UC浏览器对字体大小的控制-->
<meta name="wap-font-scale" content="no">

<!--告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame(谷歌浏览器内嵌框架)-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!--建立一个视觉窗口, 可视区域宽度等于设备宽度, 初始缩放比例为1倍, 最小缩放比例为1倍, 最大缩放比例为1倍, 禁止用户进行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

<title>找回密码</title>

<link rel="stylesheet" href="<%=basePath%>css/zhicwl.css">
<link rel="stylesheet" href="<%=basePath%>css/zhicwl-bj.css">
<link rel="stylesheet" href="<%=basePath%>css/zhicwl-zj.css">

<script src="<%=basePath%>js/fontSize.js"></script>
<script src="<%=basePath%>js/jquery-1.11.3.min.js"></script>

<link rel="stylesheet" href="<%=basePath%>plugins/layer/mobile/need/layer.css"/>
<script src="<%=basePath%>plugins/layer/mobile/layer.js"></script>

</head>

<body>
<header class="header-2">
	<div class="header-2-left"><a href="<%=basePath%>login.jsp"></a></div>
	<div class="header-2-title">找回密码</div>
</header>
<article style="margin-top: 44px;">
  <section>
    <form class="dlzc-form" style="margin-top:0;" onsubmit="return false">
      <div class="height1"></div>
      
      <section class="dlzc-form-input padding-lr-15 overflow-hidden">
        <span style="width:75px; display:inline-block;">账 &nbsp;&nbsp; 号</span>
        <p><input name="phone" id="phone" type="number" placeholder="请输入手机号号码" autocomplete="off"></p>   
      </section>
      <section class="dlzc-form-input yamkdlt padding-lr-15 overflow-hidden">
        <span style="width:75px; display:inline-block;">验 证 码</span>
        <p><input name="code" id="code" type="text" placeholder="请输入验证码"><button type="button" id="getSMSCODE_BTN" class="zhicwl-btn">获取验证码</button></p>   
      </section>     
      <section class="dlzc-form-input yamkdlt padding-lr-15">
        <span style="width:75px; display:inline-block;">新密码</span>
        <p><input name="password" id="password" type="password" placeholder="请输入6-20位数字、字母组合"></p> 
      </section>
      <section class="dlzc-form-input padding-lr-15">
        <span style="width:75px; display:inline-block;">确认密码</span>
        <p><input name="confirm_password" id="confirm_password" type="password" placeholder="请再次输入密码"></p> 
      </section>
      
      <div class="height1"></div>
      <div class="padding-lr-15 margin-top-15"><button type="submit" id="change_BTN" class="zhicwl-btn">重置密码</button></div>
    </form>

    <div class="padding-lr-15 margin-top-15 overflow-hidden" style="line-height:1.5">
      温馨提示：<br>
      手机验证码因网络问题会有部分延迟，请耐心等待
    </div>
  </section>

</article>

<script type="text/javascript">
	var ctx = "${pageContext.request.contextPath}";
	var second = 60;
	$(function() {
		$("#getSMSCODE_BTN").on("click",function(){
			$(this).attr("disabled", true);
			sendSMSCODE();
		});
		$("#change_BTN").on("click",function(){
			$(this).attr("disabled", true);
			change();
		});
	});
	
	// 修改密码
	function change() {
		var phone = $("#phone").val();
		var password = $("#password").val();
		var confirm_password = $("#confirm_password").val();
		var code = $("#code").val();
		if (null == phone || phone == "") {
			layer.open({
				content: "手机号码不能为空",
				skin: 'msg',
				time: 2, //2秒后自动关闭
				end:function(){
					$("#change_BTN").removeAttr("disabled");
					$("#phone").focus();
				}
			});
			return;
		} else if(!(/^1[34578]\d{9}$/.test(phone))){ 
	        layer.open({
				content: "手机号码有误，请重填",
				skin: 'msg',
				time: 2, //2秒后自动关闭
				end:function(){
					$("#change_BTN").removeAttr("disabled");
					$("#phone").focus();
				}
			});
	        return;
	    }
		
		if (null == code || code == "") {
			layer.open({
				content: "验证码不能为空",
				skin: 'msg',
				time: 2, //2秒后自动关闭
				end:function(){
					$("#change_BTN").removeAttr("disabled");
					$("#code").focus();
				}
			});
			return;
		}
		
		if (null == password || password == "") {
			layer.open({
				content: "登录密码不能为空",
				skin: 'msg',
				time: 2, //2秒后自动关闭
				end:function(){
					$("#change_BTN").removeAttr("disabled");
					$("#password").focus();
				}
			});
			return;
		}
		
		if (null == confirm_password || confirm_password == "") {
			layer.open({
				content: "确认密码不能为空",
				skin: 'msg',
				time: 2, //2秒后自动关闭
				end:function(){
					$("#change_BTN").removeAttr("disabled");
					$("#confirm_password").focus();
				}
			});
			return;
		}
		
		if (confirm_password != password) {
			layer.open({
				content: "两次输入的密码不一致",
				skin: 'msg',
				time: 2, //2秒后自动关闭
				end:function(){
					$("#change_BTN").removeAttr("disabled");
					$("#confirm_password").focus();
				}
			});
			return;
		}
		
		var li = layer.open({type: 2});
		$.ajax({
	        type : "post",  
	        url : ctx+"/member/u/change",
	        dataType:"json",
	        data: {
	        	phone : $('#phone').val(),
	        	password : $('#password').val(),
	        	code : $('#code').val()
	        },
	        success : function(msg) {
	        	layer.close(li);
	        	layer.open({
 					content: msg.msg,
 					skin: 'msg',
 					time: 1, //2秒后自动关闭
 					end:function(){
 						$("#change_BTN").removeAttr("disabled");
 						if (msg.code == 0) {
 			        		window.location.href = ctx+"/login.jsp";
 			        	}
 					}
 				});
	        }
	    });
	}
	
	// 发送验证短信
	function sendSMSCODE(){
		var phone = $("#phone").val();
		if (null == phone || phone == "") {
			layer.open({
				content: "手机号码不能为空",
				skin: 'msg',
				time: 2, //2秒后自动关闭
				end:function(){
					$("#phone").focus();
				}
			});
			return;
		} else if(!(/^1[34578]\d{9}$/.test(phone))) {
	        layer.open({
				content: "手机号码有误，请重填",
				skin: 'msg',
				time: 2, //2秒后自动关闭
				end:function(){
					$("#phone").focus();
				}
			});
	        return;
	    }
		$.ajax({
	        type : "post",  
	        url : ctx+"/sms/change_password",
	        dataType:"json",
	        data: {
	        	phone : $('#phone').val()
	        },
	        success:function(msg) {
	        	layer.open({
					content: msg.msg,
					skin: 'msg',
					time: 2 //2秒后自动关闭
				});
	        	if (msg.code == "-1") {
	        		if (null != countDownSend_timeout) {
	    				clearTimeout(countDownSend_timeout);
	    			}
	        		second = 60;
	        		$("#getSMSCODE_BTN").removeAttr("disabled").text("重新发送");
	        	} else {
	        		countDownSend();
	        	}
	        }  
	    });
	}
	
	var countDownSend_timeout;
	function countDownSend() {
		if (second == 1) {
			second = 60;
			$("#getSMSCODE_BTN").removeAttr("disabled").text("重新发送");
		} else {
			$("#getSMSCODE_BTN").text(second+"s后重新发送");
			second--;
			if (null != countDownSend_timeout) {
				clearTimeout(countDownSend_timeout);
			}
			countDownSend_timeout = setTimeout(countDownSend, 1000)
		}
	}
	
</script>
</body>
</html>